<template>
  <div class="qq-doc">
    <Toolbar
        style="border-bottom: 1px solid #e5e5e5"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <div class="editor-box">
      <Editor
          style="background-color: #fff; overflow: auto;"
          v-model="valueHtml"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="handleCreated"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import '@wangeditor/editor/dist/css/style.css' // 引入 css
  import { shallowRef,ref,onBeforeUnmount } from 'vue'
  import { Editor,Toolbar } from '@wangeditor/editor-for-vue'
  const editorRef = shallowRef()
  const mode = ref('default');
  // 内容 HTML
  const valueHtml = ref(`<h1>唐多令·芦叶满汀洲</h1>
    <h2>宋·刘过</h2>
    <ul>
        <li>安远楼小集，侑觞歌板之姬黄其姓者，乞词于龙洲道人，为赋此《唐多令》。同柳阜之、刘去非、石民瞻、周嘉仲、陈孟参、孟容。时八月五日也。</li>
        <li>芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。</li>
        <li>黄鹤断矶头，故人今在否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。</li>
    </ul>
    <img src="">
`)

  const toolbarConfig = {
  }
  const editorConfig = {
    placeholder: '请输入内容...',
    scroll: false, // 禁止编辑器滚动
  }

  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
  })

  const handleCreated = (editor:any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
  }

</script>

<style scoped>
.qq-doc{
  background-color: #f5f7f8;
  height: calc(100vh - 160px);
  overflow: hidden;
}
.editor-box{
  width: 900px;
  margin: 20px auto;
  height: 700px;
}
</style>